<template>
  <view class="normal-login-container" :style="{ backgroundImage: `url(${seasonBackground})` }">
    <view class="logo-content align-center justify-center flex">
      <image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
      </image>
      <text class="title">黄山陪爬注册</text>
    </view>
    <view class="login-form-content">
      <view class="input-item flex align-center">
        <view class="iconfont icon-user icon"></view>
        <input v-model="registerForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
      </view>
      <view class="input-item flex align-center">
        <view class="iconfont icon-password icon"></view>
        <input v-model="registerForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
      </view>
      <view class="input-item flex align-center">
        <view class="iconfont icon-password icon"></view>
        <input v-model="registerForm.confirmPassword" type="password" class="input" placeholder="请输入重复密码" maxlength="20" />
      </view>
      <view class="input-item flex align-center" @click="showRolePicker = true">
        <view class="iconfont icon-group icon"></view>
        <view class="input role-selector">
          <text v-if="registerForm.roleId" style="color: #333;">{{ getRoleName(registerForm.roleId) }}</text>
          <text v-else style="color: #666;">请选择身份</text>
        </view>
        <view class="iconfont icon-arrow-down" style="font-size: 24rpx; color: #999; margin-right: 20rpx;"></view>
      </view>
      <view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
        <view class="iconfont icon-code icon"></view>
        <input v-model="registerForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
        <view class="login-code"> 
          <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
        </view>
      </view>
      <view class="action-btn">
        <button @click="handleRegister()" class="register-btn cu-btn block bg-blue lg round">注册</button>
      </view>
    </view>
    
    <!-- 身份选择弹窗 -->
    <view class="role-picker-mask" v-if="showRolePicker" @click="showRolePicker = false">
      <view class="role-picker" @click.stop>
        <view class="role-picker-header">
          <text class="role-picker-title">选择注册身份</text>
          <text class="role-picker-close" @click="showRolePicker = false">×</text>
        </view>
        <view class="role-picker-content">
          <view 
            class="role-item" 
            :class="{ 'role-item-active': registerForm.roleId === 100 }"
            @click="selectRole(100)">
            <view class="role-icon">🧗</view>
            <view class="role-info">
              <text class="role-name">配爬员</text>
              <text class="role-desc">为游客提供陪同登山服务</text>
            </view>
            <view class="role-check" v-if="registerForm.roleId === 100">✓</view>
          </view>
          <view 
            class="role-item" 
            :class="{ 'role-item-active': registerForm.roleId === 101 }"
            @click="selectRole(101)">
            <view class="role-icon">👤</view>
            <view class="role-info">
              <text class="role-name">普通用户</text>
              <text class="role-desc">寻找配爬员，预约登山服务</text>
            </view>
            <view class="role-check" v-if="registerForm.roleId === 101">✓</view>
          </view>
        </view>
      </view>
    </view>
    <view class="xieyi text-center">
      <text @click="handleUserLogin" class="text-blue">使用已有账号登录</text>
    </view>
  </view>
</template>

<script>
  import { getCodeImg, register } from '@/api/login'

  export default {
    data() {
      return {
        codeUrl: "",
        captchaEnabled: true,
        globalConfig: getApp().globalData.config,
        showRolePicker: false,
        registerForm: {
          username: "",
          password: "",
          confirmPassword: "",
          code: "",
          uuid: "",
          roleId: null
        }
      }
    },
    computed: {
      // 根据当前月份获取季节对应的背景图
      seasonBackground() {
        const month = new Date().getMonth() + 1; // getMonth() 返回 0-11，所以要 +1
        
        // 春季：3, 4, 5月 -> chun.png
        // 夏季：6, 7, 8月 -> xia.png  
        // 秋季：9, 10, 11月 -> qiu.png
        // 冬季：12, 1, 2月 -> dong.png
        
        if (month >= 3 && month <= 5) {
          return '/static/chun.png';
        } else if (month >= 6 && month <= 8) {
          return '/static/xia.png';
        } else if (month >= 9 && month <= 11) {
          return '/static/qiu.png';
        } else {
          return '/static/dong.png';
        }
      }
    },
    created() {
      this.getCode()
    },
    methods: {
      // 用户登录
      handleUserLogin() {
        this.$tab.navigateTo(`/pages/login`)
      },
      // 获取图形验证码
      getCode() {
        getCodeImg().then(res => {
          this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
          if (this.captchaEnabled) {
            this.codeUrl = 'data:image/gif;base64,' + res.img
            this.registerForm.uuid = res.uuid
          }
        })
      },
      // 选择角色
      selectRole(roleId) {
        this.registerForm.roleId = roleId
        this.showRolePicker = false
      },
      // 获取角色名称
      getRoleName(roleId) {
        return roleId === 100 ? '配爬员' : roleId === 101 ? '普通用户' : ''
      },
      // 注册方法
      async handleRegister() {
        if (this.registerForm.username === "") {
          this.$modal.msgError("请输入您的账号")
        } else if (this.registerForm.password === "") {
          this.$modal.msgError("请输入您的密码")
        } else if (this.registerForm.confirmPassword === "") {
          this.$modal.msgError("请再次输入您的密码")
        } else if (this.registerForm.password !== this.registerForm.confirmPassword) {
          this.$modal.msgError("两次输入的密码不一致")
        } else if (!this.registerForm.roleId) {
          this.$modal.msgError("请选择注册身份")
        } else if (this.registerForm.code === "" && this.captchaEnabled) {
          this.$modal.msgError("请输入验证码")
        } else {
          this.$modal.loading("注册中，请耐心等待...")
          this.register()
        }
      },
      // 用户注册
      async register() {
        const roleId = this.registerForm.roleId
        const roleName = this.getRoleName(roleId)
        
        register(this.registerForm).then(res => {
          this.$modal.closeLoading()
          const that = this
          uni.showModal({
          	title: "注册成功",
          	content: "恭喜你，您已成功注册为" + roleName + "！请登录使用。",
          	success: function (res) {
          		if (res.confirm) {
                // 注册成功后跳转到登录页面
                uni.redirectTo({ url: `/pages/login` });
          		}
          	}
          })
        }).catch(() => {
          if (this.captchaEnabled) {
            this.getCode()
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #ffffff;
  }

  .normal-login-container {
    width: 100%;
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    .logo-content {
      width: 100%;
      font-size: 21px;
      text-align: center;
      padding-top: 15%;

      image {
        border-radius: 4px;
      }

      .title {
        margin-left: 10px;
        color: #ffffff;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
      }
    }

    .login-form-content {
      text-align: center;
      margin: 20px auto;
      margin-top: 15%;
      width: 80%;
      background-color: transparent;
      border-radius: 20px;
      padding: 30px 20px;

      .input-item {
        margin: 20px auto;
        background-color: rgba(255, 255, 255, 0.8);
        height: 45px;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.3);

        .icon {
          font-size: 38rpx;
          margin-left: 10px;
          color: #333;
        }

        .input {
          width: 100%;
          font-size: 14px;
          line-height: 20px;
          text-align: left;
          padding-left: 15px;
          color: #333;
          
          &::placeholder {
            color: #666;
          }
        }

      }

      .register-btn {
        margin-top: 40px;
        height: 45px;
      }

      .xieyi {
        color: #333;
        margin-top: 20px;
        
        text {
          color: #ffffff;
          text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
        }
      }
      
      .login-code {
        height: 38px;
        float: right;
      
        .login-code-img {
          height: 38px;
          position: absolute;
          margin-left: 10px;
          width: 200rpx;
        }
      }
    }
  }
  
  .role-selector {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  
  .role-picker-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: flex;
    align-items: flex-end;
  }
  
  .role-picker {
    width: 100%;
    background-color: #fff;
    border-radius: 20rpx 20rpx 0 0;
    padding-bottom: 40rpx;
    animation: slideUp 0.3s ease;
    
    .role-picker-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx 40rpx;
      border-bottom: 1px solid #f0f0f0;
      
      .role-picker-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }
      
      .role-picker-close {
        font-size: 60rpx;
        color: #999;
        line-height: 1;
        margin-top: -10rpx;
      }
    }
    
    .role-picker-content {
      padding: 20rpx 40rpx;
      
      .role-item {
        display: flex;
        align-items: center;
        padding: 30rpx;
        margin: 20rpx 0;
        background-color: #f8f9fa;
        border-radius: 16rpx;
        border: 2px solid transparent;
        transition: all 0.3s;
        
        &.role-item-active {
          background-color: #e7f4ff;
          border-color: #1989fa;
        }
        
        .role-icon {
          font-size: 60rpx;
          margin-right: 30rpx;
        }
        
        .role-info {
          flex: 1;
          display: flex;
          flex-direction: column;
          
          .role-name {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 10rpx;
          }
          
          .role-desc {
            font-size: 24rpx;
            color: #999;
          }
        }
        
        .role-check {
          font-size: 40rpx;
          color: #1989fa;
          font-weight: bold;
        }
      }
    }
  }
  
  @keyframes slideUp {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

</style>
